<template>
	<a-modal v-model:visible="visible" width="40vw" class="permodal" title="选人" @ok="handleOk">
		<a-transfer v-model:target-keys="targetKeys" class="tree-transfer" :data-source="dataSource"
			@change="handleChange" :render="(item) => item.title" :show-select-all="false">
			<template #children="{ direction, selectedKeys, onItemSelect }">
				<a-tree v-if="direction === 'left'" block-node checkable default-expand-all :fieldNames="fieldNames"
					:checked-keys="[...selectedKeys, ...targetKeys]" :tree-data="treeData" @check="(_, props) => {
			onChecked(props, [...selectedKeys, ...targetKeys], onItemSelect)
		}
		" @select="(_, props) => {
			onChecked(props, [...selectedKeys, ...targetKeys], onItemSelect)
		}
		" />
			</template>
		</a-transfer>
	</a-modal>
</template>

<script setup name="PickPeople">
import { message } from 'ant-design-vue'
const visible = ref(false)

const fieldNames = {
	children: 'bizUserList',
	title: 'name',
	key: 'id'
}
const props = defineProps({
	roleList: Array,
	setPersions: Boolean
})
const setVisible = () => {
	visible.value = !visible.value
}
defineExpose({ setVisible })

const emit = defineEmits(['succses'])

const transferDataSource = []
const flatten = (list = []) => {
	list.forEach((item) => {
		transferDataSource.push({
			key: item.id,
			title: item.name,
			account: item.account,
			deptCode: item.orgId
		})
		// transferDataSource.push(item);
		if (item.bizUserList) flatten(item.bizUserList)
	})
}
flatten(JSON.parse(JSON.stringify(props.roleList)))
const isChecked = (selectedKeys, eventKey) => {
	return selectedKeys.indexOf(eventKey) !== -1
}
const handleTreeData = (treeNodes, targetKeys = []) => {
	return treeNodes.map(({ bizUserList, ...props }) => ({
		...props,
		disabled: targetKeys.includes(props.id),
		bizUserList: handleTreeData(bizUserList ?? [], targetKeys)
	}))
}

const targetKeys = ref([])
const dataSource = ref(transferDataSource)
// console.log(dataSource.value)
const treeData = computed(() => {
	return handleTreeData(props.roleList, targetKeys.value)
})
const onChecked = (e, checkedKeys, onItemSelect) => {
	// console.log(e)/
	const { eventKey, bizUserList, parent } = e.node
	// 点击父节点
	if (bizUserList.length > 0) {
		bizUserList.forEach((v) => {
			onItemSelect(v.id, !isChecked(checkedKeys, v.id))
		})
	} else {
		// 点击子节点
		if (parent) {
			onItemSelect(eventKey, !isChecked(checkedKeys, eventKey))
		}
	}
}

const handleChange = (nextTargetKeys, direction, moveKeys) => {
	// 	console.log('targetKeys: ', nextTargetKeys)
	// 	console.log('direction: ', direction)
	// 	console.log('moveKeys: ', moveKeys)
}
const handleOk = () => {
	const source = dataSource.value.filter((v) => v.account)
	let arr = []
	// console.log(props.setPersions)
	if (!props.setPersions && targetKeys.value.length > 1) {
		message.error('只能选择一个人')
		return false
	}
	targetKeys.value.forEach((v) => {
		source.forEach((s) => {
			if (v === s.key) {
				arr.push({
					name: s.title,
					account: s.account,
					deptCode: s.deptCode
				})
			}
		})
	})
	// console.log(arr)
	emit('succses', arr)
}
</script>

<style lang="less">
.permodal {
	height: 70vh;
	padding-bottom: 0;
	border-radius: 4px;
}

.permodal .ant-modal-body {
	height: 500px;
	overflow-y: auto;
}

.permodal .ant-modal-body::-webkit-scrollbar {
	width: 6px;
	background-color: #fff;
	border-bottom-right-radius: 4px;
	border-top-right-radius: 4px;
}

.permodal .ant-modal-body::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 4px;
}

.permodal .ant-modal-body {
	scrollbar-width: 10px;
	scrollbar-base-color: green;
	scrollbar-track-color: red;
	scrollbar-arrow-color: blue;
}
</style>
<style scoped>
.tree-transfer .ant-transfer-list:first-child {
	width: 50%;
	flex: none;
}
</style>
<style></style>
